<template>
  <div class="home">
    <!-- 头部搜索 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click='toLogin'>登录</div>
      </template>
    </van-search>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in banners" :key="image.id">
        <img v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item v-for="item in tabs" :key="item.id" :icon="item.url" :text="item.title" icon-size="45px" @click="toPopularity(item.id)"/>
    </van-grid>

    <div>
      <!-- 8个图 -->
      <div class="today">
        <van-image @click="toDetail(item.id)"
      v-for="item in grid"
      :key="item.id"
      width=50%
      height="107"
      lazy-load
      :src="item.url"
      />
      <!-- 4图宫格 -->
      <van-image @click="toDetail(item.id)"
      v-for="item in tab"
      :key="item.id"
      width=25%
      height="107"
      lazy-load
      :src="item.url"
      />
      </div>

    </div>
    <!-- 今日必抢 -->
    <div class="today">
      <p>今日必抢</p>
    </div>
    <!-- 手机专区 -->
    <div calss="shouji today">
      <p style="float:left;margin-left:10px">手机专区</p>
      <a href="#"
      style="float:right;
      color: rgba(0,0,0,.3);
      font-weight: 400;
      font-size: .26rem;
      margin-right:10px;
      margin-top:18px;
      ">更多</a>
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in phone"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div style="margin-top:10px">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>
    <!-- 智能声学 -->
    <div class="shenxue today">
      <p>智能声学</p>
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202108/202108230808546123940e3833a.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in shenxue"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 智能穿戴 -->
    <div class="chuandai today">
      <p>智能穿戴</p>
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202108/20210823080826612393f2c1ebd.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in chuandai"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>
    <!-- 智能电视 -->
    <div class="dainshi today">
      <p>智能电视</p>
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202109/20210929120941615342f517351.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in dianshi"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 手机配件 -->
    <div class="peijain today">
      <p>手机配件</p>
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in peijian"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>
    <!-- 数码 -->
    <div class="shuma today">
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in shuma"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 个护 -->
    <div class="guhu today">
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202103/2021032205030160586105230ba.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in gehu"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 个护 -->
    <div class="ryong today">
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202103/2021032205033460586126aaecd.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in ryong"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 厨房小家电 -->
    <div class="chufang today">
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202103/20210322050324605861586fcf0.png?_w_=1009&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in chufang"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>

    <!-- 电器 -->
    <div class="dianqi today">
      <van-image
        width="351.2"
        height="104.51"
        src="https://dsfs.oppo.com/archives/202103/20210322050324605861586fcf0.png?_w_=1009&_h_=300&x-oss-process=image/format,webp"
      />
      <template>
        <van-grid :border="true" column-num="3">
        <van-grid-item
        v-for="item in dianqi"
        :key="item.id">
        <van-image @click="toDetail(item.id)" :src="item.url" />
        <template solt="text">
          <div class="title"
          style="color: #000;
          font-weight: 400;
          font-size: .35rem;
          line-height: .39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
          >
            {{item.title}}
          </div>
          <div class="">
            <span
            class="price"
            style="color: #f63434;
            font-weight: 500;
            font-size: .35rem;"
            >¥{{item.price}}</span>
            <span class="originalPrice">{{item.originalPrice}}</span>
          </div>
        </template>
        </van-grid-item>

      </van-grid>
      </template>
    </div>
  </div>
</template>

<script>
import { getBanners, getTabs, getMains } from '@/api/home'

import { grid, tab, phone, shenxue, chuandai, dianshi, peijian, shuma, gehu, ryong, chufang, dianqi } from '@/mock'

export default {
  name: 'Home',
  data() {
    return {
      value: '',
      banners: [],
      tabs: [],
      tab: [],
      grid: [],
      today: [],
      phone: [],
      shenxue: [],
      chuandai: [],
      dianshi: [],
      peijian: [],
      shuma: [],
      gehu: [],
      ryong: [],
      chufang: [],
      dianqi: [],
    }
  },
  created() {
    getBanners()
      .then(item => {
        this.banners = item.data
      })

    getTabs()
      .then(item => {
        this.tabs = item.data
      })

    getMains().then(item => {
      this.today = item.data[0].productDetailss
      this.grid = grid
      this.tab = tab
      this.phone = phone
      this.shenxue = shenxue
      this.chuandai = chuandai
      this.dianshi = dianshi
      this.peijian = peijian
      this.shuma = shuma
      this.gehu = gehu
      this.ryong = ryong
      this.chufang = chufang
      this.dianqi = dianqi
    })
  },
  methods: {
    toDetail(id) {
      this.$router.push('/detail?skuId=' + id)
    },
    toLogin() {
      this.$router.push('/login')
    },
    toPopularity(id) {
      console.log(id)
      if (id === 683) {
        this.$router.push('/popularity')
      }
    },
  },
}
</script>

<style lang="less" scoped>
  /deep/.van-swipe-item{
    height: 200px;

    img{
      width: 100%;
      height: 100%;
    }
  }
  .today{
    padding: 0 10px;
  }
  .van-grid{
    width: 100%;
  }
  p{
    color: #000;
    font-weight: 500;
    font-size: .4rem;
    line-height: .6rem;
  }
  .originalPrice{
    align-items: center;
    -webkit-box-pack: center;
    margin-left: .06rem;
    color: rgba(0,0,0,.3);
    font-weight: 400;
    font-size: .21rem;
    text-decoration: line-through;
  }
</style>
